/*
 * 有时间就干掉这search直接搬运到热搜索
 * */
import React, {PureComponent} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  Dimensions,
  ViewPropTypes,
  DeviceEventEmitter,
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import {PropTypes} from 'prop-types';
import windowUtil from '../../../utils/windowUtil';
import eventTypes from '../../../config/eventTypes';

class Search extends PureComponent {
  //提供属性的类型检查
  static propTypes = {
    defaultText: PropTypes.string,
    mode: PropTypes.string,
    style: ViewPropTypes.style,
    autoFocus: PropTypes.bool,
  };

  constructor(props) {
    super(props);
    this.state = {
      defaultText: !this.props.defaultText
        ? '复制淘宝/京东/拼多多商品名称搜索'
        : this.props.defaultText,
      mode: !this.props.mode ? 'Button' : this.props.mode,
      inputText: !this.props.defaultText
        ? '复制淘宝/京东/拼多多商品名称搜索'
        : this.props.defaultText,
    };
  }
  componentDidMount() {
    //自动选中
    const {autoFocus} = this.props;
    if (autoFocus && autoFocus === true) {
      if (this.state.mode === 'Input') {
        this.refs.textInputRefer.focus(); //blur
      }
    }
    //注册监听
    this.cancelFocusEvent = DeviceEventEmitter.addListener(
      eventTypes.cancelFocusEvent,
      this.cancelFocus,
    );
    this.setInputTextEvent = DeviceEventEmitter.addListener(
      eventTypes.setInputText,
      this.setInputText,
    );
  }
  componentWillUnmount() {
    this.cancelFocusEvent.remove();
    this.setInputTextEvent.remove();
  }

  /**
   * 取消聚焦
   * */
  cancelFocus = () => {
    if (this.refs.textInputRefer) {
      this.refs.textInputRefer.blur(); //blur
    }
  };
  /**
   * 事件接受设置输入
   * */
  setInputText = (text) => {
    this.setState({
      inputText: text,
    });
  };

  /**
   * 点击btn
   * */
  onClick = () => {
    const {onClick} = this.props;
    if (onClick != null) {
      onClick();
    }
  };

  onChangeText = (t) => {
      this.setState({
          inputText: t,
      });
      const {onTextChange} = this.props;
      if (onTextChange != null) {
          onTextChange(t);
      }
  };

  /**
   * 确定
   * */
  onSubmitEditing = () => {
    const {onSubmit} = this.props;
    if (onSubmit != null) {
      onSubmit(this.state.inputText);
    }
  };

  /**
   * 点击清空value
   * */
  onClickClose=()=>{
     this.onChangeText('')
  }
  // 渲染按钮
  renderBtn = () => {
    return (
      <TouchableOpacity onPress={this.onClick} activeOpacity={0.8}>
        <View style={styles.border}>
          <AntDesign
            style={styles.icon}
            name="search1"
            size={30}
            color={'gray'}
          />
          <Text numberOfLines={1} ellipsizeMode="head" style={styles.tex}>
            {this.state.defaultText}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };

  renderInput = () => {

    return (
      <View style={styles.border}>
        <AntDesign
          name="search1"
          style={styles.icon}
          size={25}
          color={'gray'}
        />
        <TextInput
          // placeholder={this.state.defaultText}
          defaultValue={this.state.inputText}
          clearButtonMode="while-editing"
          maxLength={50}
          ref="textInputRefer"
          style={styles.tex}
          onSubmitEditing={this.onSubmitEditing}
          onChangeText={this.onChangeText}
        >
        </TextInput>
          {
              this.state.inputText == ''?<View/> :(
                  <TouchableOpacity onPress={this.onClickClose} activeOpacity={0.8}>
                  <AntDesign
                      name="closecircleo"
                      style={styles.closeIcon}
                      size={20}
                      color={'gray'}
                  />
              </TouchableOpacity>)
          }

      </View>
    );
  };

  renderView = () => {
    if (this.state.mode === 'Button') {
      return this.renderBtn();
    } else {
      return this.renderInput();
    }
  };

  render() {
    const style = !this.props.style ? {} : this.props.style;
    return <View style={style}>{this.renderView()}</View>;
  }
}

const styles = StyleSheet.create({
  border: {
    borderColor: 'gray',
    height: 40,
    borderWidth: 0.3,
    borderRadius: 28,
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    marginLeft: 5,
    flex: 1,
  },
  tex: {
    fontSize: 15,
    marginLeft: 10,
    color: '#666666',
    flex: windowUtil.flexWidthRate(30 + 10),
  },
   closeIcon:{
      justifyContent:'center',
       alignItems: 'center',
       marginRight:10,
   }
});

export default Search;
